<div [dMovable]="true" [handle]="header" [moveEl]="parent">
  <div class="modal-header" #header>
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="22">
        {{ 'app.common.operate.new.title' | translate: data.title }}
      </d-col>
      <d-col [dSpan]="2" style="text-align: right">
        <d-button
          icon="icon-close"
          bsStyle="text-dark"
          title="{{ 'app.common.operate.close.label' | translate }}"
          (btnClick)="data.onClose()"
        ></d-button>
      </d-col>
    </d-row>
  </div>
  <form dForm ngForm [layout]="formLayout" [dValidateRules]="formConfig.rule" #form="dValidateRules"
        (dSubmit)="submitForm($event)">
    <div class="modal-body" style="padding: 0px 48px 0px 48px">
      <d-form-item>
        <d-form-label [required]="true">{{ 'flink.cluster-config.name' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="name" [(ngModel)]="formData.name" [dValidateRules]="formConfig.nameRules"/>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">{{ 'flink.cluster-config.flinkVersion' | translate }}</d-form-label>
        <d-form-control>
          <d-select name="flinkVersion"
                    [allowClear]="true"
                    [filterKey]="'label'"
                    [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                    [options]="flinkVersionList"
                    [dValidateRules]="formConfig.flinkVersionRules"
                    (valueChange)="onFlinkVersionValueChange($event)"
                    size="sm"
                    [(ngModel)]="formData.flinkVersion"></d-select>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">{{ 'flink.cluster-config.resourceProvider' | translate }}</d-form-label>
        <d-form-control>
          <d-select name="resourceProvider"
                    [allowClear]="true"
                    [filterKey]="'label'"
                    [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                    [options]="resourceProviderList"
                    [dValidateRules]="formConfig.resourceProviderRules"
                    size="sm"
                    [(ngModel)]="formData.resourceProvider"></d-select>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">{{ 'flink.cluster-config.deployMode' | translate }}</d-form-label>
        <d-form-control>
          <d-select name="deployMode"
                    [allowClear]="true"
                    [filterKey]="'label'"
                    [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                    [options]="deployModeList"
                    [dValidateRules]="formConfig.deployModeRules"
                    size="sm"
                    [(ngModel)]="formData.deployMode"></d-select>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">{{ 'flink.release.name' | translate }}</d-form-label>
        <d-form-control>
          <d-select name="flinkRelease"
                    [allowClear]="true"
                    [filterKey]="'fileName'"
                    [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                    [options]="flinkReleaseList"
                    [dValidateRules]="formConfig.flinkReleaseRules"
                    size="sm"
                    [(ngModel)]="formData.flinkRelease"></d-select>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label>{{ 'flink.deploy-config.name_' | translate }}</d-form-label>
        <d-form-control>
          <d-select name="flinkDeployConfig"
                    [allowClear]="true"
                    [enableLazyLoad]="true"
                    [filterKey]="'name'"
                    [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                    [options]="flinkDeployConfigList"
                    size="sm"
                    (loadMore)="onFlinkDeployConfigLoadMore($event)"
                    [(ngModel)]="formData.flinkDeployConfig"></d-select>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label>{{ 'flink.remark' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="remark" [(ngModel)]="formData.remark" [dValidateRules]="formConfig.remarkRules"/>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label>自定义配置</d-form-label>
        <d-form-control>
          <d-data-table
            #dataTable
            [dataSource]="customConfigdataTableDs"
            [tableOverflowType]="'overlay'"
            [scrollable]="true">
            <tbody dTableBody>
            <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
              <tr dTableRow *ngIf="rowIndex === 0">
                <td dTableCell [attr.colspan]="3" style="padding: 0px;">
                  <div class="btn-group" style="text-align: center;">
                    <d-button
                      icon="icon-code-editor-add"
                      bsStyle="text-dark"
                      (click)="newRow()"
                      title="{{ 'app.common.operate.add.label' | translate }}"></d-button>
                  </div>
                </td>
              </tr>
              <tr dTableRow *ngIf="rowIndex === 0">
                <td dTableCell *ngIf="headerNewForm" style="padding: 0px 0px 0px 5px;">
                  <div class="input-block">
                    <input class="devui-form-control" name="key" [(ngModel)]="defaultRowData.key" placeholder="key" type="text"/>
                  </div>
                </td>
                <td dTableCell *ngIf="headerNewForm" style="padding: 0px 0px 0px 5px;">
                  <div class="input-block">
                    <input class="devui-form-control" name="value" [(ngModel)]="defaultRowData.value" placeholder="value" type="text"/>
                  </div>
                </td>
                <td dTableCell *ngIf="headerNewForm" style="padding: 0px 0px 0px 5px;">
                  <div class="btn-group">
                    <d-button
                      icon="icon-right"
                      bsStyle="text-dark"
                      (click)="quickRowAdded()"
                      title="{{ 'app.common.operate.add.label' | translate }}"></d-button>
                    <d-button
                      icon="icon-error"
                      bsStyle="text-dark"
                      (click)="quickRowCancel()"
                      title="{{ 'app.common.operate.delete.label' | translate }}"></d-button>
                  </div>
                </td>
              </tr>
              <tr dTableRow >
                <td dTableCell style="padding: 0px 0px 0px 5px;">{{ rowItem.key }}</td>
                <td dTableCell style="padding: 0px 0px 0px 5px;">{{ rowItem.value }}</td>
                <td dTableCell style="padding: 0px 0px 0px 5px;">
                  <div class="btn-group">
                    <d-button
                      icon="icon-delete"
                      bsStyle="text-dark"
                      (click)="deleteRow(rowIndex)"
                      title="{{ 'app.common.operate.delete.label' | translate }}"></d-button>
                  </div>
                </td>
              </tr>
            </ng-template>
            <ng-template #noResultTemplateRef>
              <div class="btn-group" style="text-align: center; margin-top: -40px">
                <d-button
                  icon="icon-code-editor-add"
                  bsStyle="text-dark"
                  (click)="newRow()"
                  title="{{ 'app.common.operate.add.label' | translate }}"></d-button>
              </div>
              <tr dTableRow *ngIf="headerNewForm">
                <td dTableCell style="padding-left: 5px;">
                  <div class="input-block">
                    <input class="devui-form-control" name="key" [(ngModel)]="defaultRowData.key" placeholder="key" type="text"/>
                  </div>
                </td>
                <td dTableCell style="padding-left: 5px;">
                  <div class="input-block">
                    <input class="devui-form-control" name="value" [(ngModel)]="defaultRowData.value" placeholder="value" type="text"/>
                  </div>
                </td>
                <td dTableCell style="padding-left: 5px;">
                  <div class="btn-group">
                    <d-button
                      icon="icon-right"
                      bsStyle="text-dark"
                      (click)="quickRowAdded()"
                      title="{{ 'app.common.operate.add.label' | translate }}"></d-button>
                    <d-button
                      icon="icon-error"
                      bsStyle="text-dark"
                      (click)="quickRowCancel()"
                      title="{{ 'app.common.operate.delete.label' | translate }}"></d-button>
                  </div>
                </td>
              </tr>
            </ng-template>
            </tbody>
          </d-data-table>
        </d-form-control>
      </d-form-item>
    </div>
    <div class="modal-footer" style="text-align: right; padding-right: 42px">
      <d-form-operation>
        <d-button style="margin-right: 4px" bsStyle="common" (btnClick)="data.onClose($event)">
          {{ 'app.common.operate.cancel.label' | translate }}
        </d-button>
        <d-button bsStyle="primary" dFormSubmit>{{ 'app.common.operate.confirm.label' | translate }}</d-button>
      </d-form-operation>
    </div>
  </form>
</div>
